<template>
  <div class="tab-content-container user-notifications">
    <h3 class="section-title">消息通知</h3>
    
    <el-tabs v-model="activeTab">
      <el-tab-pane label="系统通知" name="system">
        <div class="notification-list">
          <div 
            v-for="notification in systemNotifications" 
            :key="notification.id" 
            class="notification-item"
            :class="{ 'unread': !notification.read }"
          >
            <div class="notification-icon">
              <el-icon v-if="!notification.read"><Bell /></el-icon>
              <el-icon v-else><Message /></el-icon>
            </div>
            <div class="notification-content">
              <div class="notification-header">
                <div class="notification-title">{{ notification.title }}</div>
                <div class="notification-time">{{ notification.time }}</div>
              </div>
              <div class="notification-body">{{ notification.content }}</div>
            </div>
            <div class="notification-actions">
              <el-button v-if="!notification.read" type="text" size="small" @click="markAsRead(notification)">
                标为已读
              </el-button>
              <el-button type="text" size="small" @click="deleteNotification(notification)">
                删除
              </el-button>
            </div>
          </div>
          
          <el-empty 
            v-if="systemNotifications.length === 0" 
            description="暂无系统通知" 
          />
        </div>
      </el-tab-pane>
      
      <el-tab-pane label="认领通知" name="claim">
        <div class="notification-list">
          <div 
            v-for="notification in claimNotifications" 
            :key="notification.id" 
            class="notification-item"
            :class="{ 'unread': !notification.read }"
          >
            <div class="notification-icon">
              <el-icon v-if="!notification.read"><Bell /></el-icon>
              <el-icon v-else><Message /></el-icon>
            </div>
            <div class="notification-content">
              <div class="notification-header">
                <div class="notification-title">{{ notification.title }}</div>
                <div class="notification-time">{{ notification.time }}</div>
              </div>
              <div class="notification-body">{{ notification.content }}</div>
            </div>
            <div class="notification-actions">
              <el-button 
                v-if="notification.type === 'claim_request' && !notification.processed" 
                type="primary" 
                size="small" 
                @click="handleClaimRequest(notification, true)"
              >
                同意
              </el-button>
              <el-button 
                v-if="notification.type === 'claim_request' && !notification.processed" 
                size="small" 
                @click="handleClaimRequest(notification, false)"
              >
                拒绝
              </el-button>
              <el-button 
                v-if="notification.type === 'claim_result'" 
                type="text" 
                size="small" 
                @click="viewClaimDetail(notification)"
              >
                查看详情
              </el-button>
              <el-button v-if="!notification.read" type="text" size="small" @click="markAsRead(notification)">
                标为已读
              </el-button>
              <el-button type="text" size="small" @click="deleteNotification(notification)">
                删除
              </el-button>
            </div>
          </div>
          
          <el-empty 
            v-if="claimNotifications.length === 0" 
            description="暂无认领通知" 
          />
        </div>
      </el-tab-pane>
    </el-tabs>
    
    <div class="notification-pagination">
      <el-pagination
        layout="prev, pager, next"
        :total="50"
        :page-size="10"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';
import { Bell, Message } from '@element-plus/icons-vue';
import { ElMessageBox, ElMessage } from 'element-plus';

export default {
  name: 'UserNotifications',
  components: {
    Bell,
    Message
  },
  props: {
    userId: {
      type: String,
      required: true
    }
  },
  setup() {
    const activeTab = ref('system');
    
    // 模拟数据
    const systemNotifications = [
      {
        id: 1,
        title: '系统升级通知',
        content: '系统将于2023年10月15日晚上22:00-24:00进行系统升级，期间可能会出现短暂服务中断，请您谅解。',
        time: '2023-10-10 15:30',
        read: false
      },
      {
        id: 2,
        title: '账户安全提醒',
        content: '为了保障您的账户安全，建议您定期修改密码。',
        time: '2023-10-05 10:15',
        read: true
      }
    ];
    
    const claimNotifications = [
      {
        id: 101,
        type: 'claim_request',
        title: '有人申请认领您拾到的钱包',
        content: '用户李同学(ID:2001)申请认领您于2023-10-03在篮球场拾到的钱包，请及时处理。',
        time: '2023-10-04 09:20',
        read: false,
        processed: false,
        itemId: 101
      },
      {
        id: 102,
        type: 'claim_result',
        title: '认领申请已通过',
        content: '您申请认领的学生证已通过审核，请联系失主安排交接。',
        time: '2023-10-02 14:50',
        read: true,
        itemId: 2
      }
    ];
    
    const markAsRead = (notification) => {
      notification.read = true;
      ElMessage.success('已标记为已读');
    };
    
    const deleteNotification = (notification) => {
      ElMessageBox.confirm(
        '确定要删除这条通知吗？',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        // 删除逻辑
        if (notification.type === 'claim_request' || notification.type === 'claim_result') {
          const index = claimNotifications.findIndex(n => n.id === notification.id);
          if (index !== -1) {
            claimNotifications.splice(index, 1);
          }
        } else {
          const index = systemNotifications.findIndex(n => n.id === notification.id);
          if (index !== -1) {
            systemNotifications.splice(index, 1);
          }
        }
        ElMessage.success('删除成功');
      }).catch(() => {
        // 取消删除
      });
    };
    
    const handleClaimRequest = (notification, approve) => {
      ElMessageBox.confirm(
        `确定${approve ? '同意' : '拒绝'}这个认领申请吗？`,
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: approve ? 'success' : 'warning'
        }
      ).then(() => {
        notification.processed = true;
        ElMessage.success(`已${approve ? '同意' : '拒绝'}认领申请`);
      }).catch(() => {
        // 取消操作
      });
    };
    
    const viewClaimDetail = (notification) => {
      console.log('查看认领详情', notification);
      // 跳转到详情页
    };
    
    const handleCurrentChange = (page) => {
      console.log(`当前页: ${page}`);
      // 加载对应页的数据
    };
    
    return {
      activeTab,
      systemNotifications,
      claimNotifications,
      markAsRead,
      deleteNotification,
      handleClaimRequest,
      viewClaimDetail,
      handleCurrentChange
    };
  }
};
</script>

<style scoped>
.user-notifications {
  width: 100%;
  max-width: none;
}

.section-title {
  margin-top: 0;
  margin-bottom: 20px;
  color: var(--text-primary);
  font-size: 18px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 10px;
}

.notification-list {
  margin-bottom: 20px;
}

.notification-item {
  display: flex;
  padding: 15px;
  border-bottom: 1px solid var(--border-color-light);
  transition: background-color 0.3s;
}

.notification-item:hover {
  background-color: #f5f7fa;
}

.notification-item.unread {
  background-color: #ecf5ff;
}

.notification-icon {
  display: flex;
  align-items: flex-start;
  padding-top: 5px;
  margin-right: 15px;
  color: var(--primary-color);
}

.notification-content {
  flex: 1;
}

.notification-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}

.notification-title {
  font-weight: bold;
  font-size: 15px;
  color: var(--text-primary);
}

.notification-time {
  font-size: 13px;
  color: var(--text-secondary);
}

.notification-body {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.notification-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  margin-left: 10px;
}

.notification-pagination {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
</style> 